import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Icon, Input, Button, Select, Alert, Row, Col } from 'antd';
import { connect } from 'dva';
const { TextArea } = Input;
const { Option } = Select;

export default class Comform extends React.Component<any, any> {
  static defaultProps = {
    view: {},
  };
  handleSubmit = () => {
    const { dispatch, close, submit, view } = this.props;
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        close && close();
        const data = {
          ...values,
          wineUnits: [Number(values.wineUnits)],
        };
        submit && submit(view, data);
      }
    });
  };

  render() {
    const { getFieldDecorator, getFieldValue, resetFields } = this.props.form;
    const { typeData, utillist } = this.props;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const Type = getFieldValue('wineType');
    console.log(this.props, 888888);
    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label={'酒品id'} style={{ display: 'none' }}>
          {getFieldDecorator('id', {})(<Input />)}
        </Form.Item>
        <Form.Item label={'酒类名：'}>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入酒类名' }],
          })(<Input placeholder="请输入酒类名" />)}
        </Form.Item>
        <Form.Item label="包装类型">
          {getFieldDecorator('wineType', {
            rules: [{ required: true, message: '请选择订单类型' }],
          })(
            <Select
              placeholder="请选择包装类型"
              onSelect={val => {
                this.props.dispatch({
                  type: 'commodity/utils',
                  payload: {
                    wineType: val,
                  },
                });
                resetFields(['wineUnits']);
              }}
            >
              {typeData.length > 0
                ? typeData.map((item: any) => (
                    <Option key={item.value} value={item.value}>
                      {item.label}
                    </Option>
                  ))
                : null}
            </Select>,
          )}
        </Form.Item>
        <Form.Item label={'单位'}>
          {getFieldDecorator('wineUnits')(
            <Select placeholder="请选择单位">
              {utillist.length > 0
                ? utillist.map((item: any) => (
                    <Option key={item.value} value={item.value}>
                      {item.label}
                    </Option>
                  ))
                : null}
            </Select>,
          )}
        </Form.Item>
        {/* <Form.Item label={'单位'}>
          {Type == 'BOTTLED' ? (
            <>
              {getFieldDecorator('wineUnits')(
                <Input
                  type="number"
                  addonBefore="每件/"
                  addonAfter="瓶"
                  style={{ maxWidth: '160px' }}
                />,
              )}
            </>
          ) : (
            <>
              {getFieldDecorator('wineUnits', {
                initialValue: '斤',
              })(<Input type="text" disabled={true} style={{ width: '44px' }} />)}
            </>
          )}
        </Form.Item> */}
        <Form.Item label={'备注'}>
          {getFieldDecorator('comments', {
            rules: [],
          })(<TextArea rows={4} placeholder="请输入描述性信息" />)}
        </Form.Item>
      </Form>
    );
  }
}

// export default connect(() => ({}))(Form.create()(Comform));
